/*
  学习目标：props的两大特点 - 任意数据类型
  1. props可以传递任意数据类型
  2. props是只读的, 单项数据流
*/

import React, { Component } from 'react';

export default class App extends Component {
  render() {
    return (
      <div>
        App
        <Header
          // 1. 基本数据类型
          isShow={true}
          un={undefined}
          nu={null}
          name="ls"
          age={19}
          // 2. 对象和数组
          list={[1, 2, 3]}
          child={{ name: 'lxs', age: 1 }}
        ></Header>
        <Footer
          // 3.💥 函数
          fn={() => {
            alert(132);
          }}
          // 4.💥 JSX
          element={<i>我想歪了</i>}
        ></Footer>
      </div>
    );
  }
}

function Footer({ fn, element }) {
  console.log('element  ----->  ', element);
  return (
    <div>
      <h1>Footer</h1>
      <button onClick={fn}>点我</button>
      {element}
    </div>
  );
}

function Header({ name, age, isShow, list, child }) {
  console.log('child  ----->  ', child);
  return (
    <>
      <h1>
        Header - {name} - {age}
        {String(isShow)}
      </h1>
      <h2>
        {list.map((item) => {
          return <i>{item}</i>;
        })}
      </h2>
      <h3>
        {child.name} = {child.age}
      </h3>
    </>
  );
}
